<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<table align="center" border="1px" id="tb1">
</table>
<div>
    <input class="bt2" type="button" value="测试">
    <input type="button" onclick="load(1)" value="第一页">
    <input type="button" onclick="load(2)" value="第二页">
</div>
</body>
<script src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script>
    function load(aa) {
        console.log(aa);
        $.ajax({
            "url": "/PetManage_war_exploded/ListPageServlet",
            "data": {currPageNo: aa},
            "type": "get",
            "dataType": "json",
            "success": function (data) {
                console.log(data);
                var str = "<tr><td>宠物昵称</td><td>出生日期</td><td>性别</td><td>操作</td></tr>";
                $(data.petList).each(function (index) {
                    console.log(this);
                    if (index % 2 == 0) {
                        str += "<tr bgcolor='red'><td>" + this.petName + "</td><td>" + this.birthday + "</td><td>" + this.petSex + "</td><td><input class='bt' type='button' attr='" + this.petId + "' value='删除'></td></tr>";
                    } else {
                        str += "<tr><td>" + this.petName + "</td><td>" + this.birthday + "</td><td>" + this.petSex + "</td><td><input class='bt' type='button' attr='" + this.petId + "' value='删除'></td></tr>";
                    }
                })
                str += "<tr><td colspan='4'>总页数:" + data.totalPageCount + "</td></tr>";
                str += "<tr><td colspan='4'><a onclick='load(1)' href='#'>首页</a></td></tr>";
                if (data.currPageNo > 1) {
                    str += "<tr><td colspan='4'><a onclick='load(" + (data.currPageNo - 1) + ")' href='#'>上一页</a></td></tr>";
                }
                str += "<tr><td colspan='4'><a onclick='load(" + (data.currPageNo + 1) + ")' href='#'>下一页</a></td></tr>";
                str += "<tr><td colspan='4'><a onclick='load(" + data.totalPageCount + ")' href='#'>尾页</a></td></tr>";
                $("#tb1").html(str);
            }
        })
    }

    load(1);

    //根据传递过来的id进行删除
    // function delteById(id) {
    //     console.log(id);
    //     /*$.ajax({
    //         "url": "/PetManage_war_exploded/ListPageServlet",
    //         "data":{currPageNo:aa},
    //         "type": "get",
    //         "dataType": "json",
    //         "success": function (data) {
    //         }
    //     })*/
    // }

    //绑定点击事件--绑定的元素必须不能是将来生成的
    //   $(".bt2").click(function () {
    //       console.log("bt2......")
    //   })

    //绑定点击事件
    $(document).on("click", ".bt", function () {
        //查看当前鼠标点击的对象
        console.log(($(this).attr('attr')));
        //通过attr方法可以获取标签的相关属性
        var id = $(this).attr('attr');
        //发送ajax请求
        $.ajax({
            "url": "/PetManage_war_exploded/DeleteByIdServlet",
            "data": {id: id},
            "type": "get",
            "dataType": "json",
            "success": function (data) {
                if(data>0){
                    $(this).parents("tr").remove();
                }
            }
        })
    })


</script>


</html>
